<template>
  <el-drawer custom-class="zw_drawer" v-model="drawer" direction="rtl" :size="1000"  @close="close">
    <template #title>
      <div v-html="props.title" class="drawer_tit"></div>
    </template>
    <div v-if="drawer" class="content">
      <el-radio-group v-model="StatusName" style="margin-bottom: 10px">
        <el-radio-button label="0">未转化</el-radio-button>
        <el-radio-button label="1">已转化</el-radio-button>
        <el-radio-button label="2">已放弃</el-radio-button>
      </el-radio-group>
      <div v-if="StatusName == 0"><OneTable /> </div>
      <div v-if="StatusName == 1"><TwoTable /></div>
      <div v-if="StatusName == 2"><ThreeTable /></div>
    </div>
  </el-drawer>
</template>
<script lang="tsx" setup>
import { ref, reactive, defineExpose } from 'vue'
import ZWDrawer from '@/components/ZWDrawer.vue'
import OneTable from './OneTable.vue'
import TwoTable from './TwoTable.vue'
import ThreeTable from './ThreeTable.vue'
const emit = defineEmits(['close'])
const props = defineProps(['clubopen', 'rowid', 'title'])
const StatusName = ref(0)
const drawer = ref(false)

let tableOption = [
  {
    type: 'index',
    width: 55,
    fixed: 'left'
  },
  {
    prop: 'operation_msg',
    label: '操作类型'
  },
  {
    prop: 'owner_before',
    label: '原归属人'
  },
  {
    label: '操作人',
    prop: 'created_user_name',
    width: 200
  },
  {
    prop: 'owner_after',
    label: '变更归属人'
  },
  {
    prop: 'created_at',
    label: '变更时间'
  }
]

const close = () => {
  emit('close')
}
defineExpose({
  setDrawer: (val:boolean) => {
    drawer.value = val
    if (val) {
      StatusName.value = StatusName.value
    } 
  }
})
</script>
<style scoped lang="scss">
.content {
  padding: 16px 0;
}
</style>
